import { useState } from "react"
import { RegisterView } from "./register"
import { LoginView } from "./login"
import styled from "@emotion/styled"
import { Button, Card, Divider, Typography } from "antd"
import logo from 'assests/logo.svg'
import left from 'assests/left.svg'
import right from 'assests/right.svg'
import {Helmet} from 'react-helmet'

export const UnauthenticatedApp = () => {
    const [isRegister, setRegister] = useState(false)
    const [error, setError ] = useState<Error | null>(null)

    return (
        <Container>
            <Header/>
            <Background/>
            
            <ShadowCard>
                <Title>
                    { isRegister ? '注册' : '登录' }
                </Title>
                { error ? <Typography.Text type="danger">{error.message}</Typography.Text> : null}
                { isRegister ? <RegisterView onError={setError}/> : <LoginView onError={setError}/> }
                <Divider />
                <a onClick={() => setRegister(!isRegister)}>
                    {isRegister ? '已经有账号了？直接登录' : '没有账号？注册新账号'}
                </a>
            </ShadowCard>
        </Container>
    );
}

export const LongButton = styled(Button)`
    width: 100%;
`
const Title = styled.h2`
    margin-bottom: 2.4rem;
    color: rgb(94,108,132);
`
const Background = styled.div`
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: left bottom, right bottom;
    background-size: calc(((100vw - 40rem)/2) - 3.2rem), calc(((100vw - 40rem)/2) - 3.2rem), cover;
    background-image: url(${left}), url(${right});
`

const Header = styled.header`
   background: url(${logo}) no-repeat center;
   padding: 5rem 0;
   background-size: 8rem;
   width: 100%;
`
const ShadowCard = styled(Card)`
    width: 40rem;
    min-height: 56rem;
    padding: 3.2rem 4rem;
    border-radius: 0.3rem;
    box-sizing: border-box;
    box-shadow: rgba(0,0,0,0.1) 0 0 10px;
    text-align: center;
`

const Container = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
`